<%--
  Created by IntelliJ IDEA.
  User: 28101
  Date: 2021/9/18
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="jstl" %>
<html>
<head>
    <link href="/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/shoppingCustom.css" rel="stylesheet">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <title>shoppingCustom</title>
    <style>
        .jiesuan{
            width: 250px;
            height: 50px;
            background-color: rgba(255, 102, 0, 0.89);
            font-size: 18px;
            color: white;
            border: none;
        }

        .logindiv{
             margin-right: 200px;
             margin-top: 20px;
             text-align: right;
        }

        .customdiv{
            margin-right: 200px;
            margin-top: 20px;
            text-align: right;
        }

    </style>
</head>
<body>

    <div style="height: 50px;background-color: rgba(250, 235, 215, 0.57)">
        <table style="position:relative; left:260px; top:15px;margin-left: 500px">
            <tr>
                <td width="60px" align="center" class="loginbtn">主页</td>
                <td width="200px"></td>
                <td width="200px" align="center" class="shopcartbtn">购物车</td>

                <td width="200px" align="center" class="mycartbtn">我的订单</td>

                <jstl:if test="${user != null}">
                    <div hidden="hidden">${user.uid }</div>
                    <td width="300px" align="center" hidden="hidden">
                            ${user.uid }
                    </td>
                    <td>
                            ${user.name }
                    </td>
                </jstl:if>

                <jstl:if test="${user == null}">
                    <td class="login">
                        登录
                    </td>
                </jstl:if>
            </tr>
        </table>
    </div>

    <div class="tablediv">
        <table class="table table-hover table-striped shoptable">
            <tr>
                <td>
                    <div class="tdchoosediv">
                        <i class="chosetextall" hidden="hidden">√</i>
                    </div>
                    <font style="position: relative;left: 10px">全选</font>
                </td>
                <td>图片</td>
                <td>名称</td>
                <td>型号</td>
                <td>颜色</td>
                <td>价格</td>
                <td>数量</td>
                <td>总计</td>
            </tr>
            <jstl:if test="${cart != null}">

                <jstl:forEach items="${cart }" var="cart">
                    <tr class="tabletr">

                        <td>
                            <div class="choosediv">
                                <i class="chosetext" style="color: #60d50a;font-size: 20px;font-weight:100" hidden="hidden">√</i>
                            </div>
                        </td>

                        <td>
                            <img src="/imgs/${cart.value.commodity.commodityImgs[0].src}" width="100px" height="100px">
                        </td>
                        <td class="comm">
                            <div class="alldiv" id=" ${cart.value.commodity.pid }">
                                    ${cart.value.commodity.commodityName }
                            </div>
                        </td>
                        <td class="cversion">
                            <div class="alldiv" id="${cart.value.commodity.commodityVersion[0].pvid }">
                                    ${cart.value.commodity.commodityVersion[0].versionname }
                            </div>
                        </td>
                        <td class="ccolor">
                            <div class="alldiv" id="${cart.value.commodity.commodityColors[0].pcid }">
                                    ${cart.value.commodity.commodityColors[0].colorname }
                            </div>
                        </td>
                        <td class="cpricetd">
                            <div class="alldiv" id="cprice">
                                    ${cart.value.commodity.commodityVersion[0].cprice }
                            </div>
                        </td>
                        <td class="ccount">
                            <div class="countdiv">
                                <div class="countdiv2">
                                    <button type="button" name="left" id="left" class="countbtn"> + </button>
                                </div>
                                <div class="countdiv2" id="countdiv">
                                    <input type="text" value="${cart.value.count }" class="countinput">
                                </div>
                                <div class="countdiv2">
                                    <button type="button" name="right" id="right" class="countbtn"> - </button>
                                </div>
                            </div>
                        </td>
                        <td class="pricetd">
                            <div class="alldiv" id="price">
                                    ${cart.value.count * cart.value.commodity.commodityVersion[0].cprice }
                            </div>
                        </td>
                    </tr>
                </jstl:forEach>

            </jstl:if>
        </table>

        <div style="font-size: 30px;font-weight:bolder;color: red" class="customdiv">
            总计：<input type="text" id="sumCustom" style="border: none;width: 100px" value="0"/> 元

        </div>

        <div class="customdiv">
            <button class="jiesuan" onclick="jiesuan()">结算</button>
        </div>

    </div>

    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/shoppingCustom.js"></script>
    <script>
        $(".login").click(function () {
            window.location.href = "/UserServlet?method=logout";
        });

        $(".loginbtn").click(function () {
            window.location.href = "/index.jsp";
        })

        $(".shopcartbtn").click(function () {
            window.location.href = "/jsp/shoppingCustom.jsp";
        })

        $(".mycartbtn").click(function () {
            window.location.href = "/HisShoppingCustomServlet?method=getUserHisShoppingCustom";
        })
    </script>

</body>
</html>
